<template>
  <div class="book">
    <div class="page"></div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.book {
  --sw: 0.5em; /* stroke width */
  width: 15em;
  height: 10em;
  background-color: lightyellow;
  border: var(--sw) solid cadetblue;
  border-radius: var(--sw);
  font-size: 20px;
  position: relative;
}

.book .page {
  height: inherit;
  /* width: calc(50% + var(--sw) + var(--sw) / 2); */
  width: 100%;

  background-color: inherit;
  border: inherit;
  border-radius: inherit;
  position: absolute;
  /* top: calc(-1 * var(--sw));
  right: calc(-1 * var(--sw)); */
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* padding: 8% 5%; */
  animation: flip 4s linear infinite;
  transform-origin: left;
  transform-style: preserve-3d;
}

.book .page span {
  display: block;
  width: 100%;
  border-top: var(--sw) solid cadetblue;
  border-radius: inherit;
  animation: 4s linear infinite;
  transform-origin: left;
  transform: scaleX(0);
  backface-visibility: hidden;
}


@keyframes flip {
  55% {
    transform: rotateY(0) translateX(0) skewY(0);
  }

  70% {
    transform: rotateY(-90deg) translateX(calc(-1 * var(--sw) / 2))
      skewY(-20deg);
  }

  80%,
  100% {
    transform: rotateY(-180deg) translateX(calc(-1 * var(--sw))) skewY(0);
  }
}
</style>
